<template>
	<view>
		<swiper :indicator-dots="false" :autoplay="false" :current="current" :disable-touch="false"
			easing-function="default" @change="onChange">
			<!-- linear、easeInCubic、easeOutCubic、easeInOutCubic -->
			<!-- 目标 -->
			<swiper-item>
				<view class="swiper-item">
					<!-- https://xd.xdzcy.top/adminuploads/e7e73e7c02be1a009d3dcc23bd14ff7b.png  -->
					<image src="https://xd.xdzcy.top/adminuploads/e7e73e7c02be1a009d3dcc23bd14ff7b.png" mode="widthFix"
						class="bg"></image>
					<view class="content">
						<view class="welcome">
							<view class="font-32">欢迎来到抽我吧</view>
							<view class="font-48 mt-15">请选择您的目标</view>
						</view>
						<view class="target-box">
							<view class="target-item" @click="formData.target=1">
								<image src="/static/entry/yan.png" mode="heightFix" class="target-img"></image>
								<text>考研</text>
							</view>
							<view class="target-item" @click="formData.target=2">
								<image src="/static/entry/bian.png" mode="heightFix" class="target-img"></image>
								<text>考编</text>
							</view>
						</view>
					</view>
					<view class="next" @click="current=1">下一步</view>
				</view>
			</swiper-item>
			<!-- 岗位类型 -->
			<swiper-item>
				<view class="swiper-item">
					<image src="https://xd.xdzcy.top/adminuploads/e7e73e7c02be1a009d3dcc23bd14ff7b.png" mode="widthFix"
						class="bg"></image>
					<view class="content">
						<view class="welcome">
							<view class="font-32" style="color:transparent">欢迎来到抽我吧</view>
							<view class="font-48 mt-15">请选择您的岗位类型</view>
						</view>
						<!-- select选择器 -->
						<view class="select-area">
							<Myselect :options="jopTypeOptions" selectName="jopType" @onSelect="onSelect"
								:backImgType="formData.target"></Myselect>
						</view>
					</view>
					<view class="next" @click="current=2">下一步</view>
				</view>
			</swiper-item>
			<!-- 院校 -->
			<swiper-item>
				<view class="swiper-item">
					<image src="https://xd.xdzcy.top/adminuploads/e7e73e7c02be1a009d3dcc23bd14ff7b.png" mode="widthFix"
						class="bg"></image>
					<view class="content">
						<view class="welcome">
							<view class="font-32" style="color:transparent">欢迎来到抽我吧</view>
							<view class="font-48 mt-15">请选择您的院校</view>
						</view>
						<view class="select-area">
							<view class="label">院校</view>
							<Myselect :options="schoolOptions" selectName="school" @onSelect="onSelect"
								:backImgType="formData.target"></Myselect>
						</view>
						<view class="select-area" style="margin-top: 30rpx;">
							<view class="label">学科</view>
							<Myselect :options="subjectOptions" selectName="subject" @onSelect="onSelect"
								:backImgType="formData.target"></Myselect>
						</view>
						<view class="select-area" style="margin-top: 30rpx;">
							<view class="label">专业</view>
							<Myselect :options="majorOptions" selectName="major" @onSelect="onSelect"
								:backImgType="formData.target"></Myselect>
						</view>
					</view>
					<view class="next" @click="goIndex">开启学习</view>
				</view>
			</swiper-item>

		</swiper>


	</view>
</template>

<script>
	import Myselect from './components/Myselect.vue';
	export default {
		components: {
			Myselect
		},
		data() {
			return {
				current: 0, //当前轮播索引
				formData: {
					target: '',
					jopType: '',
					school: '',
					subject: '',
					major: ''
				},
				// 岗位类型选项组
				jopTypeOptions: [{
						id: 1,
						name: '考编',
						value: 1
					},
					{
						id: 2,
						name: '考编',
						value: 2
					},
					{
						id: 3,
						name: '考编',
						value: 3
					},
					{
						id: 4,
						name: '考编',
						value: 4
					},
					{
						id: 5,
						name: '考编',
						value: 5
					},
					{
						id: 6,
						name: '考编',
						value: 6
					}
				],
				schoolOptions: [{
					id: 1,
					name: '郑州大学',
					value: 1
				}, {
					id: 2,
					name: '清华大学',
					value: 2
				}, {
					id: 3,
					name: '西北工业大学',
					value: 3
				}, ],
				subjectOptions: [{
						id: 1,
						name: '计算机应用技术计算机应用技术计算机应用技术计算机应用技术计算机应用技术',
						value: 1
					},
					{
						id: 2,
						name: '土木工程',
						value: 2
					},
					{
						id: 3,
						name: '临床医学',
						value: 3
					}
				],
				majorOptions: [{
						id: 1,
						name: '计算机应用技术',
						value: 1
					},
					{
						id: 2,
						name: '土木工程',
						value: 2
					},
					{
						id: 3,
						name: '临床医学',
						value: 3
					}
				],
			};
		},
		methods: {
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 切换轮播图
			onChange(e) {
				this.current = e.detail.current
			},
			// 选择器选中回调
			onSelect(e) {
				const {
					name,
					value
				} = e
				this.formData[name] = value
				console.log(this.formData);
			}
		}
	}
</script>
<style>
	page {
		overflow: hidden;
		background-color: #f8d8cb;

	}
</style>
<style lang="scss">
	swiper {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		border-radius: 0;

		swiper-item {
			width: 100%;
			height: 100%;

			border-radius: 0;

			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 0;
				position: relative;
				overflow: hidden;



				.bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 200%;
					height: 100%;
					transform: translateX(-20px);
					z-index: -1;
				}

				.content {
					width: 100%;
					height: 100%;
					font-weight: bold;

					.welcome {

						color: #3D3D3D;
						margin: 140rpx 0 0 72rpx;


					}

					.select-area {
						margin-top: 140rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.label {
							font-size: 32rpx;
							font-weight: 600;
							margin-right: 60rpx;
						}
					}

					.target-box {
						margin: 120rpx 72rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.target-item {
							position: relative;
							width: 139px;
							height: 342px;
							display: flex;
							justify-content: center;
							align-items: center;
							opacity: 1;
							border-radius: 20px;
							box-sizing: border-box;

							.target-img {
								position: absolute;
								top: 0;
								left: 0;
								width: 139px;
								height: 342px;
								z-index: -1;
							}
						}
					}
				}

				.next {
					position: absolute;
					left: 120rpx;
					bottom: 140rpx;
					width: 262px;
					height: 47px;
					border-radius: 50px;
					opacity: 1;
					background: #ED7B54;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
				}
			}
		}
	}
</style>